var fs = require('fs'); // 引入 fs 模块
const { shell, clipboard } = require('electron')
const { BrowserWindow, dialog } = require('@electron/remote')

// dom文档跟资源全部加载完毕执行
window.onload = function () {
    // 读取象牙山三巨头案例，即读取文件的信息
    var btn = this.document.querySelector('#btn_xc');
    var btn_gb = this.document.querySelector('#btn_xc_gb');
    var mybaby = this.document.querySelector('#xiangcunaiqing');
    btn.onclick = function (){
        fs.readFile('static/xiangcunaiqing.txt',(err,data) => { // 读取文件
            console.log(data, 'data')
            mybaby.innerHTML = data;
        })
    }
    btn_gb.onclick = function () {
        mybaby.innerHTML = ''
    }
    // 使用 input 标签选择文件后保存到指定路径位置
    document.getElementById('selectSaveFile').addEventListener('change', (event) => {
        console.log(event, 'file')
        const file = (event.target.files || [])[0]
        if (file) {
            // 在选择的文件位置保存文件
            const pathary = (file.path || '').split('\\')
            pathary.splice(pathary.length - 1, 1, 'seltSave.txt')
            fs.writeFileSync(pathary.join('\\'), '使用 input 标签选择文件后保存到指定路径位置，相当用 electron 的文件选择框跟文件保存框功能！')
        }
    })
    // 监听网络连接、断开
    window.addEventListener('online', event => {
        console.log(event, 'online')
        new Notification('网络已连接！')
    })
    window.addEventListener('offline', event => {
        console.log(event, 'offline')
        new Notification('网络已断开！')
    })
}

// 打开一个新窗口三个方案
function newwindowClick() {
    /** 1、使用渲染进程中的window功能打开 */ 
    // window.open('self.html')
    /** 2、使用渲染进程中的 a 标签加 target="_blank" 属性 */
    // const a = document.createElement('a')
    // a.href = 'self.html'
    // a.target = '_blank'
    // a.click()
    /** 3、使用主进程electron的remote方案 */
    let newwin = null
    newwin = new BrowserWindow({
        with: 800,
        height: 500
    })
    newwin.loadFile('view/self.html')
    newwin.webContents.openDevTools()
    newwin.on('closed', () => {
        // 回收关闭的资源
        newwin = null
    })
    /** 4、使用预加载preload的方案 */
    // 以后加上
}
// 文件路径设置，依赖渲染进程打开的路径相对index.html位置，依赖主进程打开的文件路径相对main.js位置

/** 窗口的通信方式 */
// 1、使用 url 的查询字符传参，这种最简单，但只能父窗口传给子窗口；
// 2、使用 ipcMain 通信，这种虽然繁杂，但功能自定义强，传输安全；
// 3、使用自带的 postMessage 方法，虽然此方法很便捷，一般的需求都能实现，但其安全性跟污染性需关注；
// targetwindow.postMessage(message, target)
// targetwindow：指目标窗口对象，当目标窗口是本身时，则 window.postMessage()，当目标窗口是父窗口时，则 window.opener.postMessage()；
// message：发送的消息；
// target：指定发送到的窗口 url，设置为 * 时代表全部窗口，当指定了 url 却没有找到对应窗口，此消息则不会发送；
function passMessageClick() {
    // 打开一个名叫 subwin 的子窗口
    let subwin = window.open('self.html', 'subwin', 'top:100;left:100')
    window.addEventListener('message', (event) => {
        console.log(event, 'event')
        // 给子窗口回复信息7
        if (event.origin === 'file://' && event.source.name === 'subwin') {
             setTimeout(() => {
                // 子窗口发来的则 subwin = event.source
                // subwin.postMessage(' hello, i hear your message')
                event.source.postMessage(' hello, i hear your message')
            }, 1000)
        }
    })
}

/**
 * @description 默认的浏览器中打开一个链接
 */
function defaultBrowerOpenClick() {
    shell.openExternal('http://baidu.com')
}

/** 打开文件选择对话框 */
function openFileDialogClick() {
  dialog.showOpenDialog({
    title: '选择文件',
    // defaultPath: '',
    buttonLabel: '确定选择'
    // filters: '', 文件格式过滤器
    // properties: '' 文件的属性
  }).then((result) => {
    console.log(result, 'result')
  }).catch(error => {
    console.log(error, 'error')
  })
}

/** 打开保存文件对话框 */
function openSaveDialogClick() {
    dialog.showSaveDialog({
        title: '保存文件'
    }).then(result => {
        console.log(result, 'result')
        fs.writeFileSync(result.filePath, '保存文件看一下，哈哈，惊喜！')
    }).catch(error => {
        console.log(error, 'error')
    })
}

/** 打开消息对话框 */
function openMsgDialogClick() {
    dialog.showMessageBox({
        type: 'warning', // 可以选，图标样式，有none、info、error、question和warning
        title: '消息对话框',
        message: '我只打开消息对话框看下，哈哈！',
        buttons: ['yes', 'no'] // 数组类型，点击后返回索引值
    }).then((result, val, val2) => {
        console.log(result, val, val2, 'val')
    }).catch(error => {
        console.log(error, 'error')
    })
}

/** 底部消息通知 */
// notification.permission: 当前显示通知的权限。 denied——用户拒绝显示通知； granted——用户接受显示通知； default——用户选择是未知的，因此浏览器的行为类似于值是 denied；
// 首先检查通知是否受支持，然后检查用户是否已授予当前源发送通知的权限，然后根据需要请求权限，最后发送一个通知。
function appMsgClick() {
    if (!("Notification" in window)) {
        // 检查浏览器是否支持通知
        alert("当前浏览器不支持桌面通知")
        } else if (Notification.permission === "granted") {
        // 检查是否已授予通知权限；如果是的话，创建一个通知
        const notification = new Notification("你好！", { title: '标题', body: '测试' })
        notification.addEventListener('click', event => {
            console.log(event, 'click')
        })
        notification.addEventListener('close', event => {
            console.log(event, 'close')
        })
        notification.addEventListener('show', event => {
            console.log(event, 'show')
        })
        notification.addEventListener('error', event => {
            console.log(event, 'error')
        })
        // setTimeout(() => {
        //     // 自动关闭通知实例
        //     notification.close()
        // }, 1000)
        } else if (Notification.permission !== "denied") {
        // 我们需要征求用户的许可
        Notification.requestPermission().then((permission) => {
            // 如果用户接受，我们就创建一个通知
            if (permission === "granted") {
                const notification = new Notification("你好！")
                console.log(notification)
            }
        })
    }
}

/** 使用剪贴板 */
function clipboardClick() {
    const element = document.getElementById('clipboardText')
    clipboard.writeText(element.innerText)
}